import React, { Component } from 'react'
import { Link } from 'react-router-dom'

class News extends Component {
  render() {
    return (
      <div>
        <h3>新闻列表页面</h3>
        <ul>
          <li>
            {/* 必须要先定义规则 */}
            <Link to="/detail/1">新闻1</Link>
          </li>
          <li>
            {/* 不光有动态路由参数，还有search字符串 */}
            <Link to="/detail/2?name=lisi">新闻2</Link>
          </li>
          <li>
            {/* 
              state 隐式传递数据
              要想state能传数据，则声明式导航必须要写成对象的方式
            */}
            <Link
              to={{
                pathname: '/detail/3',
                search: 'name=zhangsan',
                state: {
                  age: 100
                }
              }}
            >
              新闻3
            </Link>
          </li>
          <li>
            <button
              onClick={() => {
                this.props.history.push({
                  pathname: '/detail/4',
                  search: 'name=戴眼镜',
                  state: {
                    age: 200
                  }
                })
              }}
            >
              新闻内容
            </button>
          </li>
        </ul>
      </div>
    )
  }
}

export default News
